




let  sendKeywords =document.querySelector('input')
let  searchBtn =document.querySelector('button')
let  tbody = document.querySelector('tbody')
const audio = document.querySelector('audio')
const prev =document.querySelector('#prev')
const next =document.querySelector('#next')

let  songData = {
       keywords :'',
       limit : 15,
       offset:1
}

let receiveList = []
//记录歌曲总数
let songCount = 0
// 记录页数
let totalPage = 0
//  歌曲搜素按钮
searchBtn.addEventListener('click',function () {
    songData.keywords=sendKeywords.value
    // 请求完以后 再次进来对页数回到首页
    songData.offset = 1
    ajax({
      url:"http://netease.bluej.cn/search",
      data:songData,
      callback: function (res) {
        // console.log(res);
        //获取歌曲总数  
        songCount=res.result.songCount
        //获取歌曲数据
        receiveList = res.result.songs
        // console.log(receiveList);
        // 记录总数
        totalPage =Math.ceil(songCount/songData.limit)
        render(receiveList)
      }

    } )
})

// 点击歌名播放歌曲  
//要点击歌名歌曲播放 可以利用事件委托来实现
tbody.addEventListener('click',function (e) {
  // 页面渲染时歌曲id保存到歌名所在的元素里自定义属性里
  // 点击任意歌曲获取自定义属性里的歌曲id
  const id = e.target.dataset.id
//如果id不存在不执行下列直接退出
  if(!id) return
  ajax({
    url:'http://netease.bluej.cn/song/url',
    data:{
      //请求歌曲id数据
      id
    },
    callback : function (res) {
      //接受到的歌曲播放地址数据赋值给播放器
      audio.src = res.data[0].url
    }

  })

})

// 下一页
next.addEventListener('click',function (e) {
  //判断边界 如果当前页到了总页数 不执行直接退出
  if(songData.offset >= totalPage)  return alert('已经到最后一页了')
  songData.offset ++
  //请求数据
  ajax({
    url:"http://netease.bluej.cn/search",
    data:songData,
    callback: function (res) {
      receiveList = res.result.songs
      render(receiveList)
    }

  } )
})
//上一页
prev.addEventListener('click',function (e) {
  //判断边界 如果当前页到了总页数 不执行直接退出
  if(songData.offset<=1)  return alert('已经第一页了')
  songData.offset --
  //请求数据
  ajax({
    url:"http://netease.bluej.cn/search",
    data:songData,
    callback: function (res) {
      receiveList = res.result.songs
      render(receiveList)
    }

  } )
})

// 渲染页面
function render(data) {
  //每次打印前清空页面
   tbody.innerHTML=''
   data.forEach((item) => {
     tbody.innerHTML +=`<tr>
     <td data-id=${item.id}>${item.name}</td>
     <td>${artistName(item.artists)}</td>
     <td>${item.album.name}</td>
     <td>${songTime(item.duration)}</td>
     </tr> ` 
   });
}
 // 处理歌手名字
 function artistName(artdata) {
   let result = ''
   artdata.forEach(item => {
     // 名字拼接到一行内
     result +=item.name +'、'
     });
  //截取掉多余的、
   return result.slice(0,-1)
 }
 // 歌曲时长
 function songTime(duration) {
  duration =parseInt(duration/1000)
  let min =parseInt(duration%60).toString().padStart(2,0)
  let sec =duration%60
  return  `${min}:${sec}`
 }
songTime()


//  ajax 数据处理
function formatData(data) {
    let result = ''
    for (let key in data) {
      result += `${key}=${data[key]}&`
    }
    return result.slice(0, -1)
  }
  
// ajax封装
  const ajax = ({ url = '', method = 'get', data = {}, callback, type }) => {
    var xhr = new XMLHttpRequest()
  
    if (method.toLowerCase() === 'get') {
      url += `?${formatData(data)}`
      xhr.open('get', url)
      xhr.send()
    } else {
      xhr.open(method, url)
      let isJson = type.toLowerCase() === 'json'
  
      xhr.setRequestHeader(
        'Content-Type',
        isJson ? 'application/json' : 'application/x-www-form-urlencoded'
      )
      xhr.send(isJson ? JSON.stringify(data) : formatData(data))
    }
  
    xhr.addEventListener('load', function () {
      if (xhr.status === 200) {
        callback(JSON.parse(xhr.response))
      } else {
        callback(xhr.response)
      }
    })
  }
  